<template>
  <view class="main">
    <uv-status-bar bgColor="#000"></uv-status-bar>
    <!--自定义头部 -->
    <view class="main-navbar">
      <zy-navbar></zy-navbar>
    </view>
    <view class="main-box">
      <template v-if="httpData.address">
        <!-- <video class="main-box-video" autoplay show-mute-btn enable-play-gesture :cover="httpData.cover" :src="httpData.address"></video> -->
        <m-video
          class="main-box-video"
          autoplay
          loop
          show-speed-rate-btn
          show-casting-button
          show-mute-btn
          controls
          :src="httpData.address"
          :poster="httpData.cover"
          object-fit="cover"
          token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
          @ended="tally('play')"
        />
      </template>
      <!-- <view class="main-box-shade"></view> -->
    </view>
    <view class="main-comment">
      <view class="main-comment-title">
        <view class="title">{{ httpData.title }}</view>
        <view>{{ httpData?.description?.content }}</view>
      </view>
      <view class="main-comment-info">
        <view class="main-comment-info-title">
          <view class="avatar" @click="onGoTeacher">
            <uv-avatar :src="httpData.teacher?.profilePhoto || defaultImages[2]" size="96rpx" mode="aspectFill"></uv-avatar>
            <view class="add" @click.stop="onCollect" v-if="!httpData.teacher?.collected?.id">+</view>
          </view>
          <text class="name" :data-content="httpData.teacher?.username">
            {{ httpData.teacher?.username }}
          </text>
        </view>
        <view class="main-comment-info-content"></view>
      </view>
      <view class="main-comment-share">
        <button open-type="share" class="reset-button">分享</button>
      </view>
      <view class="main-comment-collect" :style="{ color: httpData.collected?.id ? '#B1B1B1' : '#fff' }" @click.stop="httpCollect">
        {{ httpData.collected?.id === 0 ? '收藏' : '已收藏' }}
      </view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
</template>
<script setup>
  import { defaultAvatar, defaultImages } from '@/common/js/global.js';
  import { reactive, ref } from 'vue';
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
  import { onHome, onLeft, toastFn } from '@/common/js/fn';
  const toastRef = ref();
  let httpData = ref({});
  let routeVal = ref({});
  onLoad(option => {
    routeVal.value = { ...option, id: Number(option.id) };
    httpDetail();
  });
  const onGoTeacher = () => {
    uni.$uv.route({
      url: '/pages/me/share',
      params: {
        id: httpData.value.teacher.id
      }
    });
  };
  const httpDetail = async () => {
    let res = await uni.$uv.http.post(`/app/video/detail`, { id: routeVal.value.id });
    let imageUrl = res.forwardCover || res.cover;
    res.imageUrl = imageUrl;
    httpData.value = res;
    tally('click');
  };
  const onCollect = async () => {
    await uni.$uv.http.post(`app/collect/add`, {
      classify: 'Teacher', //收藏类型
      objid: Number(httpData.value.teacher.id), //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    httpData.value.teacher.collected.id = httpData.value.teacher.collected.id ? 0 : 1;
    toastFn(toastRef.value, '收藏成功', 'success');
  };
  // 视频
  let httpCollect = async () => {
    await uni.$uv.http.post(`app/collect/${!httpData.value.collected.id ? 'add' : 'cancel'}`, {
      classify: 'Video', //收藏类型
      objid: Number(httpData.value.id), //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    httpData.value.collected.id = httpData.value.collected.id ? 0 : 1;
    toastFn(toastRef.value, `${httpData.value.collected.id ? '' : '取消'}收藏成功`, 'success');
  };
  onShareAppMessage(() => {
    let pages = uni.$uv.pages();
    let url = pages[pages.length - 1]?.$page?.fullPath || '';
    let path = `${url}${url.includes('?') ? '&' : '?'}${url.includes('isShare') ? '' : 'isShare=1'}`;
    tally('share');
    return {
      title: '#去卡#按次付费，无需囤卡，#小小跳舞,快来拿捏~',
      imageUrl: httpData.value.imageUrl,
      path
    };
  });
  const tally = async val => {
    await uni.$uv.http.post(
      'app/collect/statistic',
      {
        objectableID: httpData.value.id,
        objectableType: 'Video', 
        operationType: val //render 展示 click 查看 share 分享 play 播放完
      },
      {
        custom: { toast: false }
      }
    );
  };
</script>
<style scoped lang="scss">
  .main {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    &-navbar {
      margin-left: 23rpx;
    }
    .collect-active {
      background-color: #b1b1b1 !important;
    }
    &-box {
      flex: 1;
      width: 100%;
      position: relative;
      &-video {
        overflow: hidden;
        height: 100%;
        width: 100%;
      }
    }
    &-comment {
      height: 4.3605rem /* 80px -> 4.3605rem */;
      width: 100%;
      background-color: #000;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 0 45rpx;
      box-sizing: border-box;
      justify-content: flex-end;
      position: relative;
      &-title {
        position: absolute;
        right: 13rpx;
        top: -170rpx;
        background-color: rgba(29, 31, 36, 0.68);
        padding: 12rpx 33rpx 0;
        border-radius: 27.907rpx;
        color: #b1b1b1;
        z-index: 1;
        font-size: 24rpx;
        .title {
          text-align: right;
        }
        view {
          margin-bottom: 12rpx;
        }
      }
      &-info {
        position: absolute;
        bottom: 0;
        left: 33rpx;
        transform: translateY(-40%);
        z-index: 999;
        color: #fff;
        &-title {
          display: flex;
          align-items: flex-end;
          margin-bottom: 9rpx;
          .avatar {
            position: relative;
            border: 5rpx solid #000;
            border-radius: 50%;
            .add {
              width: 37rpx;
              height: 37rpx;
              border-radius: 50%;
              background-color: #ff7a66;
              position: absolute;
              bottom: -8.5rpx;
              right: -8.5rpx;
              color: #fff;
              line-height: 37rpx;
              text-align: center;
              font-size: 45rpx;
            }
          }
          .name {
            font-size: 28rpx;
            margin-left: 17rpx;
            text-shadow: 0 3rpx #000, 3rpx 0 #000, -3rpx 0 #000, 0 -3rpx #000;
          }
        }
      }
      &-share {
        color: $dance-main-color;
        width: 124rpx;
        height: 51rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 47rpx;
        font-size: 28rpx;
        margin-right: 14rpx;
      }
      &-collect {
        color: $dance-main-color;
        width: 124rpx;
        height: 51rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 47rpx;
        font-size: 28rpx;
      }
    }
  }
</style>
